import { CFilterScreeningCustom } from '@vh-mobile/pro-components';
import MainContainerCustom from '@/components/MainContainerCustom';
import React, { useMemo } from 'react';

export default function DemoFilterScreening() {
  const onConfirm = (value: any) => {
    console.log('value: ', value);
  };

  const columns: any[] = [
    {
      title: '汇总方式',
      dataIndex: 'iniStatus',
      valueType: 'FSelectCustom',
      fieldProps: {
        search: true,
        options: [
          { value: 1, label: '来电' },
          { value: 2, label: '来访' },
        ],
      },
    },
    {
      title: '开始日期',
      dataIndex: 'FSelectCustom',
      valueType: 'FSelectCustom',
      fieldProps: {
        options: [{ value: 1, label: 'asgj' }],
      },
    },
    {
      title: '结束日期',
      dataIndex: 'endDate',
      valueType: 'FDatetimePickerCustom',
      fieldProps: {
        minDate: `${new Date().getFullYear() - 5}-01-01`,
        maxDate: `${new Date().getFullYear() + 5}-12-31`,
      },
      cellProps: {
        // position: 'bottom',
      },
    },
    {
      title: '排名依据',
      dataIndex: 'FCheckboxCustom',
      valueType: 'FCheckboxCustom',
      fieldProps: {
        options: [
          { value: 1, label: '选项一' },
          { value: 2, label: '选项选项一' },
          { value: 3, label: '选项三' },
          { value: 4, label: '选项四' },
          { value: 5, label: '选项五选项一' },
          { value: 6, label: '选项六' },
          { value: 7, label: '选项七' },
        ],
        multiple: true,
        checkboxAll: true,
      },
      cellProps: {
        position: 'bottom',
      },
    },
    {
      title: '时间区间',
      dataIndex: 'FCheckboxDatepickerCustom1',
      valueType: 'FCheckboxDatepickerCustom',
      fieldProps: {
        field: ['this-day', 'this-month', 'this-year'],
      },
      cellProps: {
        position: 'bottom',
      },
    },
    {
      title: '日期',
      dataIndex: 'FCheckboxDatepickerCustom2',
      valueType: 'FCheckboxDatepickerCustom',
      fieldProps: {
        datetimePicker: {
          minDate: `${new Date().getFullYear() - 5}-01-01`,
          maxDate: `${new Date().getFullYear() + 5}-12-31`,
        },
      },
      cellProps: {
        position: 'bottom',
      },
    },
  ];

  const CFilterScreeningCustomNode = useMemo(() => {
    return <CFilterScreeningCustom columns={columns} onConfirm={onConfirm} text="统计条件" />;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return <MainContainerCustom>{CFilterScreeningCustomNode}</MainContainerCustom>;
}
